<template>
  <div class="person-info">
    <a href="https://yshh.wan.360.cn/game_login.php?server_id=S294&src=dhhz-cubeicon3-yshh" target="_blank">
    <img src="../../assets/image/gg1.jpg" alt="">
    </a>
    <!-- 顶部蓝色卡片 -->
    <div class="top-card">
      <div class="top-bg"></div> <!-- 渐变背景 -->
      <div class="top-content">
        <img class="avatar" :src="$store.state.dlBoole.image" alt="头像" /> <!-- 头像 -->
        <div class="user-main">
          <div class="user-row">
            <span class="user-name">{{ $store.state.dlBoole.bookfrd }}</span> <!-- 用户名 -->
            <span class="user-level">Lv{{ $store.state.dlBoole.isnovip }}</span> <!-- 等级 -->
          </div>
          <div class="user-type">普通用户</div> <!-- 用户类型 -->
        </div>
        <div class="home-btn" @click="Tuichu()">
          退出登录
        </div>
      </div>
      
      <div class="stat-row">
        <div class="stat-item">
          <span class="stat-label">关注</span>
          <span class="stat-value">0</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">粉丝</span>
          <span class="stat-value">0</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">作品</span>
          <span class="stat-value">0</span>
        </div>
      </div>
    </div>

    <!-- 下方四个信息卡片 -->
    <div class="info-cards">
      <div class="info-card">
        <div class="info-row">
          <img src="../../assets/image/yue.png" alt="">
          <span class="info-label">账户余额</span>
        </div>
        <div class="info-value">0 <span class="info-unit">起点币</span></div>
        <div class="info-link" @click="$router.push('/Recharge')">充值</div>
      </div>
      <div class="info-card">
        <div class="info-row">
          <img src="../../assets/image/pinpai.png" alt="">
          <span class="info-label">新作</span>
        </div>
        <div class="info-value">0 <span class="info-unit">本</span></div>
        <div class="info-link" @click="$router.push('/shuku/all')">立即查看</div>
      </div>
      <div class="info-card">
        <div class="info-row">
          <img src="../../assets/image/shujia (2).png" alt="">
          <span class="info-label">我的收藏</span>
        </div>
        <div class="info-value"> {{booklength}} <span class="info-unit">本</span></div>
        <div class="info-link" @click="$router.push('/bookshelf')">立即查看</div>
      </div>
      <!-- <div class="info-card">
        <div class="info-row">
          <img src="../../assets/image/pinpai.png" alt="">
          <span class="info-label">我的书单</span>
        </div>
        <div class="info-value">0 <span class="info-unit">个关注</span></div>
        <div class="info-link" @click="$router.push('/writer')">立即查看</div>
      </div> -->
    </div>
    <!-- 信息修改 -->
    <div class="XiuGai_box">
      <!-- 信息修改表单，结构与截图完全一致 -->
      <div class="setting-tabs">
        <div class="tab">个人信息</div>
      </div>
      <div class="setting-content">
        <!-- 昵称 -->
        <div class="setting-row">
          <span class="setting-label">昵称</span>
          <input type="text" class="setting-input" v-model="user.name">
          <span class="setting-tip"><i class="iconfont icon-question-circle"></i></span>
        </div>
        <!-- 性别 -->
        <div class="setting-row">
          <span class="setting-label">性别</span>
          <label class="radio-label"><input type="radio" name="gender" checked> <span class="radio-custom"></span>男</label>
          <label class="radio-label"><input type="radio" name="gender"> <span class="radio-custom"></span>女</label>
        </div>
        <!-- 简介 -->
        <div class="setting-row intro-row">
          <span class="setting-label">简介</span>
          <div class="intro-box">
            <textarea class="intro-input" maxlength="100" v-model="user.content" placeholder="可以简单的描述自己"></textarea>
            <div class="intro-count">0/100</div>
          </div>
        </div>
        <!-- 保存按钮 -->
        <div class="setting-row btn-row">
          <button class="save-btn" @click="Baocun()">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'PersonInfo',
  data() {
    return {
      user: {
        name:this.$store.state.dlBoole.bookfrd,
        content:''
      },
      booklength:0,//收藏的书本数量
    }
  },
  mounted(){
     axios.post('/api/index/shujianum', {
          phone: this.$store.state.dlBoole.phone // 传递手机号
        })
        .then(response => {
          console.log('Bookshelf data fetched successfully:', response.data.xinxi);
          this.booklength = response.data.xinxi.length;
        })
        .catch(error => {
          console.error('Error fetching bookshelf data:', error);
        });
  },
  methods: {
    //提交信息
    Baocun(){
      axios.post('/api/index/personal',{
        bookfrd:this.user.name,
        phone:this.$store.state.dlBoole.phone,
        content:this.user.content
      })
      .then(res=>{
        if(res.data.code==1){
          this.$store.state.dlBoole.bookfrd = res.data.data.bookfrd;
          //存储本地状态
          localStorage.setItem('IceLion', JSON.stringify(this.$store.state.dlBoole));
          this.$message.success('保存成功！');
          
        }else{
          this.$message.warning('保存失败！');
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    // 退出登录逻辑
    Tuichu() {
      //删除本地存储
      localStorage.removeItem("IceLion");
      this.$message.success("退出登录成功");
      // 跳转到登录页面 
      this.$router.push('/');
      this.$store.commit('setUserInfo', ''); // 清除用户信息
    }
  },
}
</script>

<style lang="scss" scoped>
.person-info {
  background: #f7f6f3; // 整体背景
  min-height: 80vh;
  padding: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2%;
  .top-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
    max-width:1200px;
    width: 1200px;
    margin: 20px auto 24px auto;
    position: relative;
    overflow: hidden;
    .top-bg {
      position: absolute;
      left: 0; top: 0; right: 0; height: 240px;
      background-image:url('../../assets/image/home-index-bg.b2c89.png');
      background-size: 100% 100%;
      z-index: 1;
    }
    .top-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 140px 32px 0 32px;
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #f2f2f2;
        border: 2px solid #e0e0e0;
        margin-right: 24px;
      }
      .user-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        .user-row {
          display: flex;
          align-items: center;
          .user-name {
            font-size: 22px;
            color: #fff;
            font-weight: bold;
            margin-right: 10px;
            margin-top: 8px;
          }
          .user-level {
            font-size: 14px;
            color: #fff;
            background: #e94f4f;
            border-radius: 4px;
            padding: 2px 8px;
            margin-top: 8px;
            font-weight: bold;
            margin-right: 8px;
          }
        }
        .user-type {
          width: 60px;
          font-size: 14px;
          color: #888;
          background: #f3f3f3;
          border-radius: 4px;
          padding: 2px 10px;
          display: inline-block;
          margin-top: 8px;
        }
      }
      .home-btn {
        background: #d1d1d1;
        color: #27408b;
        border: 1px solid #27408b;
        border-radius: 18px;
        padding: 6px 22px;
        font-size: 15px;
        font-weight: bold;
        margin-left: 18px;
        cursor: pointer;
        transition: background 0.2s;
        &:hover { background: #ffffff; }
      }
      .setting-btn {
        background: #fff;
        color: #888;
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        margin-left: 10px;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        &:hover { background: #f3f3f3; }
      }
    }
    .safe-row {
      display: flex;
      align-items: center;
      padding: 18px 32px 0 32px;
      .safe-label {
        font-size: 14px;
        color: #888;
        margin-right: 10px;
      }
      .safe-bar {
        flex: 1;
        height: 8px;
        background: #f3f3f3;
        border-radius: 4px;
        margin-right: 10px;
        overflow: hidden;
        .safe-bar-inner {
          height: 100%;
          background: #e94f4f;
          border-radius: 4px;
          transition: width 0.3s;
        }
      }
      .safe-value {
        font-size: 14px;
        color: #e94f4f;
        font-weight: bold;
      }
    }
    .stat-row {
      display: flex;
      align-items: center;
      padding: 35px 32px 18px 32px;
      .stat-item {
        margin-right:5%;
        text-align: left;
        .stat-label {
          font-size: 14px;
          color: #888;
          margin-bottom: 4px;
        }
        .stat-value {
          font-size: 18px;
          color: #222;
          font-weight: bold;
          margin-left: 6px;
        }
      }
    }
  }
  .info-cards {
    display: flex;
    max-width: 1200px;
    width: 1200px;
    margin: 0 auto;
    gap: 18px;
    .info-card {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
      flex: 1;
      padding: 18px 0 12px 24px;
      display: flex;
      flex-direction: column;
      .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        img{
            width: 20px;
            margin-right: 5px;
        }
        .info-icon {
          font-size: 22px;
          color: #e94f4f;
          margin-right: 8px;
        }
        .info-label {
          font-size: 15px;
          color: #222;
          font-weight: bold;
        }
      }
      .info-value {
        font-size: 18px;
        color: #222;
        font-weight: bold;
        margin-bottom: 6px;
        .info-unit {
          font-size: 14px;
          color: #888;
          font-weight: normal;
        }
      }
      .info-link {
        font-size: 14px;
        color: #0d1a40;
        cursor: pointer;
        text-decoration: none;
        margin-top: 2px;
        &:hover { color: #e94f4f; }
      }
    }
  }
  .XiuGai_box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
    max-width: 1200px;
    width: 1200px;
    margin: 32px auto 0 auto;
    padding: 0 0 32px 0;
    .setting-tabs {
      display: flex;
      border-bottom: 1px solid #ececec;
      height: 48px;
      align-items: center;
      .tab {
        font-size: 16px;
        color: #888;
        padding: 0 28px;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        position: relative;
        background: none;
        border: none;
        outline: none;
        &.active {
          color: #222;
          font-weight: bold;
          background: #faf9f7;
          border-radius: 6px 6px 0 0;
          border-bottom: 2px solid #fff;
        }
      }
    }
    .setting-content {
      padding: 32px 0 0 48px;
      .setting-row {
        display: flex;
        align-items: center;
        min-height: 40px;
        margin-bottom: 24px;
        font-size: 15px;
        .setting-label {
          width: 80px;
          color: #888;
          font-size: 15px;
          flex-shrink: 0;
        }
        .setting-input{
          border: none;
          line-height: 22px;
        }
        .setting-value {
          color: #222;
          font-size: 15px;
          margin-right: 8px;
        }
        .setting-link {
          color: #909090;
          font-size: 15px;
          margin-left: 8px;
        }
        .setting-tip {
          margin-left: 6px;
          color: #bdbdbd;
          font-size: 16px;
          .iconfont {
            font-size: 16px;
          }
        }
        .blue {
          color: #3b7cff;
          cursor: pointer;
        }
        .radio-label {
          display: flex;
          align-items: center;
          margin-right: 24px;
          font-size: 15px;
          color: #222;
          position: relative;
          cursor: pointer;
          input[type="radio"] {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            margin: 0;
            z-index: 1;
            cursor: pointer;
          }
          .radio-custom {
            width: 18px;
            height: 18px;
            border: 1.5px solid #d8d8d8;
            border-radius: 50%;
            margin-right: 6px;
            background: #fff;
            display: inline-block;
            position: relative;
          }
          input[type="radio"]:checked + .radio-custom {
            border-color: #e94f4f;
            background: #fff;
          }
          input[type="radio"]:checked + .radio-custom:after {
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            background: #e94f4f;
            border-radius: 50%;
            position: absolute;
            left: 3.5px;
            top: 3.5px;
          }
        }
        &.intro-row {
          align-items: flex-start;
          .intro-box {
            display: flex;
            flex-direction: column;
            width: 420px;
            .intro-input {
              width: 100%;
              height: 80px;
              border: 1px solid #e0e0e0;
              border-radius: 4px;
              padding: 10px 12px;
              font-size: 15px;
              color: #222;
              resize: none;
              background: #faf9f7;
              outline: none;
              transition: border 0.2s;
              &:focus {
                border-color: #3b7cff;
              }
            }
            .intro-count {
              color: #888;
              font-size: 13px;
              text-align: right;
              margin-top: 4px;
            }
          }
        }
        &.btn-row {
          margin-top: 8px;
          .save-btn {
            background: #e94f4f;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            padding: 8px 36px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
            margin-left: 80px;
            &:hover {
              background: #d13c3c;
            }
          }
        }
      }
    }
  }
}
</style>
